<template>
  <div class="RentGoodsSetting">
    <div class="ele-title">
      <h3>热租商品</h3>
      <p class="ele-little-title">最多添加20个商品，所有商品如果支持该城市则显示，不支持该城市则不显示。</p>
      <p class="ele-little-title">支持拖动更改显示顺序。</p>
    </div>
    <div class="content">
      <el-card>
        <el-row :span="24" type="flex" justify="start" style="flex-flow: wrap">
          <div v-for="(item,index) in list" :key="index" class="goodsBox">
            <el-image :src="item.img" :fit="'cover'" style="width: 100px;height: 100px" />
            <el-button type="danger" circle class="el-icon-close delete" @click="list.splice(index,1)" />
          </div>
          <div v-if="list.length<20" class="goodsBox">
            <div class="addUpload" @click="addGoodsDialog">
              <i class="el-icon-plus" style="line-height: 100px;font-size: 30px" />
            </div>
          </div>
        </el-row>
      </el-card>
    </div>
    <SelectAllGoodsDialog ref="selectGoodsDialog" :goods-type="'lease'" :goods-state="1" @select="onSelectGoods" />
  </div>
</template>

<script>
/** 商品 tabs */
import { addRecommend, getRecommend } from '@/api/customAPI/shop/homeSetting'
import SelectAllGoodsDialog from '@/components/SelectAllGoodsDialog'
export default {
  name: 'RentGoodsSetting',
  components: {
    SelectAllGoodsDialog
  },

  data() {
    return {
      model: null,
      list: []

    }
  },
  created() {

  },
  methods: {
    setModel(model) {
      this.model = parseInt(model)
      getRecommend({ type: 'lease' }).then(res => {
        if (res.data.data) {
          console.log(res.data.data)
          this.list = res.data.data.goodsList
        }
      })
    },
    addGoodsDialog() {
      if (this.list.length > 0) {
        this.$refs.selectGoodsDialog.setSelectList(this.list)
      }
      this.$refs.selectGoodsDialog.show()
    },
    onSelectGoods(goods) {
      console.log(goods)
      if (goods.length > 0) {
        this.list = goods
      }
    },
    submitRentGoods() {
      const data = []
      if (this.list.length == 0) {
        this.$message.error('请选择热租商品')
      } else {
        this.list.forEach(item => {
          data.push(item.goodsId)
        })
      }
      if (data.length > 0) {
        addRecommend({ type: 'lease', goodsIds: data }).then(res => {
          this.$message.success('添加热租商品成功')
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.RentGoodsSetting {
  .goodsBox {
    margin-bottom: 22px;
    position: relative;
    left: 0;
    top: 0;
    margin-right: 10px;
    .addUpload {
      width: 100px;
      height: 100px;
      border: 1px solid #EBEBEB;
      text-align: center;
    }
    .delete {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
